<template>
	<view class="box bg-white padding-l-r-30">
		<view class="align-items-center">
			<text>姓名</text>
			<view class="flex-1">
				<input type="text" placeholder="请输入姓名" v-model="info.name">
			</view>
		</view>
		<view class="line"> </view>
		<view class="align-items-center">
			<text>联系方式</text>
			<view class="flex-1">
				<input type="number" placeholder="请输入联系方式" v-model="info.contact">
			</view>
		</view>
		<view class="line"> </view>
		<view class="align-items-center">
			<text>性别</text>
			<view class="flex-1">

				<u-radio-group v-model="info.gender" placement="row" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name="item.label" activeColor="#43ABC4" >
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="line"> </view>
		<view class="align-items-center">
			<text>年龄</text>
			<view class="flex-1">
				<input type="number" placeholder="请输入年龄" v-model="info.age">
			</view>
		</view>
		<view class="line"> </view>
		<view class="align-items-center">
			<text>身份证号</text>
			<view class="flex-1">
				<input type="text" placeholder="请输入身份证号" v-model="info.card">
			</view>
		</view>
		<view class="line"> </view>
		<view class="align-items-center">
			<text>居住区域</text>
			<view class="flex-1 justifyContent-spaceBetween" @click="showPicker=true">
				<input type="text" disabled  placeholder="请选择居住区域" v-model="info.area">
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<view class="line"> </view>
		<view class="align-items-center">
			<text>详细地址</text>
			<view class="flex-1">
				<input type="text" placeholder="请输入详细地址" v-model="info.address">
			</view>
		</view>
		<view class="line"> </view>
		<view class="btn-box" @click="save">
			保存
		</view> 
		<wmCityselect v-model="showPicker" @city-change="handleCityChange"></wmCityselect>
	</view>
</template>

<script>
	import wmCityselect from '@/components/address/components/address/lib/cityselect.vue'
	export default {
		components: {
			wmCityselect
		},
		data() {
			return {
				info: {
					name: '',
					gender:"1",
					contact: '',
					age: '',
					card: '',
					address: '',
					area: ''
				},
				showPicker:false,
				radiolist: [{
						label: '1',
						name: '男'
					},
					{
						label: '0',
						name: '女'
					},
				], 
			}
		},
		methods: { 
			groupChange(e) {
				console.log(e, 2);
			},
			confirm(e){
				this.show = false
				this.info.city =e.value[0]
			},
			handleCityChange(e) {
				this.info.area = e.province.label + ' ' + e.city.label + ' ' + e.area.label; 
			},
			save(){
				if(!this.info.name){
					uni.showToast({
						icon:'none',
						title:'请输入患者姓名'
					})
					return
				}
                if (!this.info.contact){
                    uni.showToast({
                        icon:'none',
                        title:'请输入手机号'
                    })
                }
                this.$emit("save",this.info)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.align-items-center {
		height: 100rpx;
		font-size: 30rpx;

		text {
			min-width: 170rpx;
			color: #333;
		}
	}
	.btn-box { 
		height: 90rpx;
		margin: 80rpx 0 ;
		background: #43ABC4;
		border-radius: 14rpx;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx
	}
</style>